import {createNamespace} from '../../utils';
import Cell from '../../cell';
import CellGroup from '../../cell-group';
import Field from '../../field';
import {isEmail} from '../../utils/validate/email';
import {isNumber} from '../../utils/validate/number';
import SkuImgUploader from './SkuImgUploader';

var _createNamespace = createNamespace('sku-messages'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1],
    t = _createNamespace[2];

export default createComponent({
    props: {
        messages: {
            type: Array,
            default: function _default() {
                return [];
            }
        },
        messageConfig: Object,
        goodsId: [Number, String]
    },
    data: function data() {
        return {
            messageValues: this.resetMessageValues(this.messages)
        };
    },
    watch: {
        messages: function messages(val) {
            this.messageValues = this.resetMessageValues(val);
        }
    },
    methods: {
        resetMessageValues: function resetMessageValues(messages) {
            return (messages || []).map(function () {
                return {
                    value: ''
                };
            });
        },
        getType: function getType(message) {
            if (+message.multiple === 1) {
                return 'textarea';
            }

            if (message.type === 'id_no') {
                return 'text';
            }

            return message.datetime > 0 ? 'datetime-local' : message.type;
        },
        getMessages: function getMessages() {
            var _this = this;

            var messages = {};
            this.messageValues.forEach(function (item, index) {
                var value = item.value;

                if (_this.messages[index].datetime > 0) {
                    value = value.replace(/T/g, ' ');
                }

                messages["message_" + index] = value;
            });
            return messages;
        },
        getCartMessages: function getCartMessages() {
            var _this2 = this;

            var messages = {};
            this.messageValues.forEach(function (item, index) {
                var value = item.value;
                var message = _this2.messages[index];

                if (message.datetime > 0) {
                    value = value.replace(/T/g, ' ');
                }

                messages[message.name] = value;
            });
            return messages;
        },
        getPlaceholder: function getPlaceholder(message) {
            var type = +message.multiple === 1 ? 'textarea' : message.type;
            var map = this.messageConfig.placeholderMap || {};
            return message.placeholder || map[type] || t("placeholder." + type);
        },
        validateMessages: function validateMessages() {
            var values = this.messageValues;

            for (var i = 0; i < values.length; i++) {
                var value = values[i].value;
                var message = this.messages[i];

                if (value === '') {
                    // 必填字段的校验
                    if (String(message.required) === '1') {
                        var textType = t(message.type === 'image' ? 'upload' : 'fill');
                        return textType + message.name;
                    }
                } else {
                    if (message.type === 'tel' && !isNumber(value)) {
                        return t('invalid.tel');
                    }

                    if (message.type === 'mobile' && !/^\d{6,20}$/.test(value)) {
                        return t('invalid.mobile');
                    }

                    if (message.type === 'email' && !isEmail(value)) {
                        return t('invalid.email');
                    }

                    if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
                        return t('invalid.id_no');
                    }
                }
            }
        }
    },
    render: function render() {
        var _this3 = this;

        var h = arguments[0];
        return h(CellGroup, {
            "class": bem(),
            "attrs": {
                "border": this.messages.length > 0
            }
        }, [this.messages.map(function (message, index) {
            return message.type === 'image' ? h(Cell, {
                "class": bem('image-cell'),
                "attrs": {
                    "value-class": bem('image-cell-value'),
                    "label": t('imageLabel'),
                    "title": message.name,
                    "required": String(message.required) === '1'
                },
                "key": _this3.goodsId + "-" + index
            }, [h(SkuImgUploader, {
                "attrs": {
                    "uploadImg": _this3.messageConfig.uploadImg,
                    "maxSize": _this3.messageConfig.uploadMaxSize
                },
                "model": {
                    value: _this3.messageValues[index].value,
                    callback: function callback($$v) {
                        _this3.$set(_this3.messageValues[index], "value", $$v);
                    }
                }
            })]) : h(Field, {
                "attrs": {
                    "maxlength": "200",
                    "label": message.name,
                    "required": String(message.required) === '1',
                    "placeholder": _this3.getPlaceholder(message),
                    "type": _this3.getType(message)
                },
                "key": _this3.goodsId + "-" + index,
                "model": {
                    value: _this3.messageValues[index].value,
                    callback: function callback($$v) {
                        _this3.$set(_this3.messageValues[index], "value", $$v);
                    }
                }
            });
        })]);
    }
});